<template>
<div id="topbar">
  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item index="1">
      <el-dropdown >
  <span class="el-dropdown-link" >
       <el-dropdown-menu slot="dropdown"   >
          <el-dropdown-item icon="el-icon-setting" >
            <el-button @click="logout" size="small" type="primary">退出登录</el-button></el-dropdown-item>
        </el-dropdown-menu>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
      </el-dropdown>
    </el-menu-item>
    <el-menu-item index="2">您好,亲爱的{{userName}}同学</el-menu-item>
    <el-menu-item index="3" @click="showInformation">个人信息</el-menu-item>
  </el-menu>
</div>
</template>
<script>
export default {
  created () {
    console.log(JSON.parse(localStorage.getItem('user')))
    this.userName = JSON.parse(localStorage.getItem('user')).name
  },
  data () {
    return {
      userName: '',
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    logout () {
      localStorage.removeItem('user')
      this.$router.push({path: '/'})
    },
    showInformation () {
      this.$router.push({
        name: 'selfinformation'
      })
    }
  }

}
</script>
<style scoped>

</style>
